<template>
  <el-dialog
    title="视频管理"
    custom-class="distribution-dialog"
    :close-on-click-modal="false"
    :modal="false"
    :visible.sync="videoDialog"
    :before-close="handleClose"
  >
    <div slot="title" style="color:white;text-align:center">
      <span>视频管理</span>
    </div>
    <el-container style="height:100%">
      <el-container>
        <el-header style="height:10%">
          <!-- 搜索框 -->
          <el-autocomplete
            class="inline-input"
            v-model="searchKey"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
            popper-class="default-select-popper"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-autocomplete>
        </el-header>
        <el-container style="height:90%;padding: 0 20px;">
          <el-aside class="aside-left">
            <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
              <el-tree
                :data="videoGroupTreeData"
                icon-class="el-icon-arrow-right"
                node-key="id"
                highlight-current
                @node-click="nodeClick"
                :filter-node-method="groupFilter"
                :default-expanded-keys="expandedTreeKey"
                ref="videoTree"
              ></el-tree>
            </el-scrollbar>
          </el-aside>
          <el-main>
            <el-table
              :data="tableData"
              cell-class-name="table-cell-custom"
              header-cell-class-name="table-herder-custom"
              highlight-current-row
              size="small"
              style="width: 100%"
              height="100%"
              ref="myTable"
            >
              <el-table-column width="55" type="selection" align="center"></el-table-column>
              <el-table-column label="摄像头名称" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.videoName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="厂商" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.videoName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="IP" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.IPAddr }}</span>
                </template>
              </el-table-column>
              <el-table-column label="端口" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.IPPort }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <img
                    style="cursor: pointer;width:22px"
                    src="../../assets/images/Edit_Hover.png"
                    @click="handleModify(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <div slot="footer" class="dialog-footer">
      <div style="float:right">
        <el-button @click="handleAdd" size="small">新 增</el-button>
        <el-button @click="handleDel" size="small">删 除</el-button>
      </div>
    </div>
    <!-- 新增/修改界面 -->
    <el-dialog
      title="视频管理"
      custom-class="inner-dialog"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogAdd"
      :before-close="handleAddClose"
      width="100%"
    >
      <div slot="title" style="color:white;text-align:center">
        <span>视频管理</span>
      </div>
      <svg-icon class="back-to-list" icon-class="back" @click="dialogAdd = false"></svg-icon>
      <div style="height:400px">
        <el-scrollbar wrap-style="overflow-x:hidden;height:200px" style="height:100%;">
          <el-form
            ref="form"
            :model="form"
            label-width="120px"
            hide-required-asterisk
            :rules="rules"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item label="摄像头名称：" prop="videoName">
                  <el-input v-model="form.videoName" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="厂商：" prop="videoMode">
                  <el-select v-model="form.videoMode" popper-class="default-select-popper">
                    <el-option
                      v-for="opt in videoModeMap"
                      :key="opt.key"
                      :label="opt.value"
                      :value="opt.key"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="Url：">
                  <el-input v-model="form.url" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="传输方式：" prop="gate">
                  <el-select v-model="form.gate" popper-class="default-select-popper">
                    <el-option
                      v-for="opt in gateMap"
                      :key="opt.key"
                      :label="opt.value"
                      :value="opt.key"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="IP：" prop="IPAddr">
                  <el-input v-model="form.IPAddr" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="端口：" prop="IPPort">
                  <el-input
                    v-model="form.IPPort"
                    size="small"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="用户名：">
                  <el-input v-model="form.userName" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="密码：">
                  <el-input v-model="form.userPwd" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="设备编号：">
                  <el-input v-model="form.puid" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="GPS编号：">
                  <el-input v-model="form.gpsBH" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="视频组：">
              <div class="group-item" v-for="(item, index) in form.group" :key="index" prop="group">
                <svg-icon icon-class="remove" @click="removeList(form.group,index)"></svg-icon>
                <el-input v-model="item.groupName" style="width:240px" disabled></el-input>
                <img
                  class="img-threeDian"
                  src="../../assets/mainMenuImg/three_dian.png"
                  @click="addGroup(index)"
                />
              </div>
              <div class="group-item add">
                <svg-icon icon-class="plus" @click="addGroupDemo()"></svg-icon>
                <label class="add-label" @click="addGroupDemo()">添加所属组</label>
              </div>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="form.remark" type="textarea" :rows="2" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus == 'add'?handleCreate():handleUpdate()" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 组选择 -->
    <div class="default-select-tree groupTree" v-show="showTree">
      <el-scrollbar class="tree-scrollbar" wrap-class="tree-scrollbar__wrap">
        <el-tree
          :data="videoGroupTreeData"
          icon-class="el-icon-arrow-right"
          node-key="nid"
          highlight-current
          @check-change="groupCheckChange"
          check-strictly
          ref="groupTree"
        ></el-tree>
      </el-scrollbar>
      <el-button @click="commitGroup">确 定</el-button>
    </div>
    <!-- 摄像头窗口 -->
    <!-- <camera-form
      v-if="openCameraForm"
      :title="cameraFormTitle"
      :open.sync="openCameraForm"
      :formData="cameraForm"
    ></camera-form>-->
  </el-dialog>
</template>

<script>
import { dataflow } from '@/api/data'
import { mapGetters } from 'vuex'
import deepClone from '@/utils/clone'

export default {
  props: {
    videoDialog: Boolean,
  },
  components: {},
  data() {
    var validateIP = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入IP'))
      } else {
        var reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-4][0-9])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/
        var re = new RegExp(reg)
        var ip = value
        if (ip == null || ip == '') {
          callback(new Error('ip不可为空！'))
          return false
        }
        if (!re.test(ip)) {
          callback(new Error('请填写有效的IP地址！'))
          return false
        }
        callback()
      }
    }
    return {
      tableData: [],
      form: {},
      showTree: false,
      value: '',
      groupIndex: '',
      dialogAdd: false,
      dialogStatus: 'add',
      searchKey: '',
      videoArr: [],
      expandedTreeKey: [],
      videoModeMap: [
        {
          key: 0,
          value: 'RTSP',
        },
        {
          key: 1,
          value: 'MS-RTSP',
        },
        {
          key: 2,
          value: 'MS-POC',
        },
        {
          key: 3,
          value: 'HTTP',
        },
        {
          key: 4,
          value: 'Hikvison',
        },
      ],
      gateMap: [
        {
          key: 0,
          value: 'TCP',
        },
        {
          key: 1,
          value: 'UDP',
        },
      ],
      rules: {
        IPAddr: [
          { required: true, message: '请输入IP', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' },
        ],
        videoName: [
          {
            required: true,
            message: '请输入摄像头名称',
            trigger: 'blur',
          },
        ],
        videoMode: [
          {
            required: true,
            message: '请选择厂商',
            trigger: 'change',
          },
        ],
        gate: [
          {
            required: true,
            message: '请选择传输方式',
            trigger: 'change',
          },
        ],
        IPPort: [
          {
            required: true,
            message: '请填写端口',
            trigger: 'blur',
          },
        ],
      },
      curuentItem: {},
    }
  },
  computed: {
    ...mapGetters({
      videoMap: 'videoMap',
      videoTreeData: 'videoTreeData',
      videoGroupMap: 'videoGroupMap',
      videoGroupTreeData: 'videoGroupTreeData',
      videoNidMap: 'videoNidMap',
    }),
  },
  methods: {
    init() {},
    eventMore(e) {
      let _this = this
      console.log(e)
      switch (e.type) {
        case 'VideoInfoDel':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('摄像头删除失败')
          }
          break
        case 'VideoInfoMod':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('摄像头修改失败')
          }
          break
        case 'VideoInfoAdd':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('摄像头新增失败')
          }
          break
        default:
          break
      }
    },
    //刷新页面
    handleFresh() {
      let _this = this
      this.$store.dispatch('initVideo')
      this.tableData = []
      this.$nextTick(() => {
        _this.$refs.videoTree.filter()
      })
    },
    //sercher
    filterTable() {},
    // 点击树节点
    nodeClick(data, node, nodeC) {
      this.curuentItem = data.obj
      this.tableData = []
      this.videoGroupMap
      const obj = this.videoGroupMap.get(data.id)
      if (obj.children.length > 0) {
        obj.children.forEach((e) => {
          if (e.type == 'video') this.tableData.push(e.obj)
        })
      }
    },
    //打开编辑
    handleModify(item) {
      this.dialogStatus = 'update'
      this.form = deepClone(item)
      if (this.form.videoMode) {
        this.form.videoMode = Number(this.form.videoMode)
      }
      if (this.form.gate) {
        this.form.gate = Number(this.form.gate)
      }
      if (this.form.group != '') {
        this.form.group.forEach((e) => {
          let video = this.videoGroupMap.get(e.groupID)
          if (video) {
            e.groupName = video.label
          }
        })
      }
      this.dialogAdd = true
    },
    //打开新增
    handleAdd() {
      if (
        this.curuentItem == '' ||
        this.curuentItem == null ||
        JSON.stringify(this.curuentItem) == '{}'
      ) {
        return this.$message.warning('请先选择摄像头组')
      }
      this.form = {
        group: [
          {
            groupID: this.curuentItem.videoGroupID,
            groupName: this.curuentItem.groupName,
          },
        ],
      }
      this.dialogAdd = true
      this.dialogStatus = 'add'
    },
    //关闭
    handleClose() {
      this.$emit('update:videoDialog', false)
    },
    // 添加组按钮
    addGroupDemo() {
      let obj = { groupID: '', groupName: '' }
      this.form.group.push(obj)
    },
    //删除组按钮
    removeList(data, index) {
      data.splice(index, 1)
    },
    //展示树，点击添加所属组
    addGroup(index) {
      this.showTree = true
      this.groupIndex = index
    },
    // 组选择框改变
    groupCheckChange(node, checked) {
      if (checked) {
        if (!this.formData.group.some((g) => g.groupID === node.obj.groupID)) {
          this.formData.group.push({
            groupID: node.obj.groupID,
            groupName: node.obj.groupName,
          })
        }
      } else {
        let index = this.formData.group.findIndex(
          (g) => g.groupID === node.obj.groupID
        )
        if (idnex !== -1) this.formData.group.splice(index, 1)
      }
    },
    // 监听鼠标事件
    clickEvent(e) {
      var box = document.getElementsByClassName(
        `default-select-tree groupTree`
      )[0]
      if (box && !box.contains(e.target)) {
        this.showTree = false
      }
    },
    //组选择确定
    commitGroup() {
      let group = this.$refs.groupTree.getCurrentNode()
      if (group == undefined || group == null) {
        this.$message.warning('请选择组')
        return
      }
      this.form.group[this.groupIndex].groupID = group.id
      this.form.group[this.groupIndex].groupName = group.label
      this.showTree = false
    },
    //搜索框事件触发过滤
    treeGroupFilter() {
      this.$refs.videoTree.filter(this.searchKey)
    },
    groupFilter(value, data, node) {
      return data.type === 'videogroup'
    },
    handleAddClose() {
      this.dialogAdd = false
    },
    querySearch(queryString, cb) {
      var restaurants = this.videoArr
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      let arr = []
      results.forEach((element) => {
        arr.push({ value: element.videoName, videoID: element.videoID })
      })
      cb(arr)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.videoName.includes(queryString)
      }
    },
    handleSelect(item) {
      console.log(item)
      let _this = this
      //找到所在组
      const video = this.videoMap.get(item.videoID)
      if (video) {
        const id = video.group[0].groupID
        this.$refs.videoTree.setCurrentKey(id)
        let node = this.$refs.videoTree.getNode(id)
        if (node) {
          this.nodeClick(node.data)
          this.expandedTreeKey.push(id)
          this.$nextTick(function () {
            setTimeout(() => {
              _this.$refs.videoTree.setCurrentKey(id)
              for (let i = 0; i < _this.tableData.length; i++) {
                let obj = _this.tableData[i]
                if (video.videoID == obj.videoID) {
                  _this.$refs.myTable.setCurrentRow(obj, true)
                  //滚动条位置】比例计算
                  _this.$refs.myTable.bodyWrapper.scrollTop =
                    _this.$refs.myTable.bodyWrapper.scrollHeight *
                    (i / _this.tableData.length)
                  break
                }
              }
            }, 300)
          })
        }
      }
    },
    //创建
    handleCreate() {
      let _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let obj = {
            request: {
              '@id': '100000',
              '@type': 'VideoInfoAdd',
              videoName: this.form.videoName,
              group: this.form.group,
              // customgroup: { groupID: null, orderNO: null },
              videoMode: this.form.videoMode,
              IPAddr: this.form.IPAddr,
              IPPort: this.form.IPPort,
              userName: this.form.userName,
              userPwd: this.form.userPwd,
              puid: this.form.puid,
              gate: this.form.gate,
              remark: this.form.remark,
              gpsBH: this.form.gpsBH,
            },
          }
          dataflow(obj).then((res) => {
            if (res.status == 200) {
              _this.dialogAdd = false
            }
          })
        }
      })
    },
    //修改
    handleUpdate() {
      let _this = this
      let form = this.form
      form['@id'] = '100000'
      form['@type'] = 'VideoInfoMod'
      let obj = {
        request: form,
      }
      dataflow(obj).then((res) => {
        if (res.status == 200) {
          _this.dialogAdd = false
        }
      })
    },
    //删除
    handleDel() {
      let _this = this
      let delArr = this.$refs.myTable.store.states.selection
      if (delArr.length == 0) {
        this.$message.warning(this.$t('m.tip.DEL_EMPTY_TIP'))
        return
      }
      this.$confirm(this.$t('m.tip.DELECT_TIP'), this.$t('m.tip.TIPS'), {
        confirmButtonText: this.$t('m.CONFIRM'),
        cancelButtonText: this.$t('m.CANCEL'),
        type: 'warning',
      }).then(() => {
        delArr.forEach((e) => {
          let obj = {
            request: {
              '@id': '100000',
              '@type': 'VideoInfoDel',
              videoID: e.videoID,
            },
          }
          dataflow(obj).then((res) => {})
        })
      })
    },
    init() {
      this.videoArr = []
      for (var item of this.videoMap.values()) {
        this.videoArr.push(item)
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener('click', this.clickEvent, true)
      this.$refs.videoTree.filter()
    })
    this.init()
    SDK.setEventMore(this.eventMore)
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
/deep/.distribution-dialog {
  cursor: default;
  background-color: #1a4969;
  .aside {
    color: white;
    margin: 0 auto;
    line-height: 24px;
    margin-left: 10px;
    .aside-part {
      height: 30%;
      border-radius: 5px;
      margin-left: 3px;
      writing-mode: vertical-lr;
      text-align: center;
      cursor: pointer;
    }
    .checked {
      background-color: #172a47;
    }
  }
  .el-dialog__close {
    color: #fff;
  }

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 0;
    height: 446px;
    .inline-input {
      margin-bottom: 10px;
      width: 100%;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
      }
      .el-autocomplete-suggestion li {
        color: white;
      }
    }
  }
  .el-dialog__footer {
    background-color: #1a4969;
    padding: 5px 30px;
    height: 45px;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .default-scrollbar {
    width: 100%;
    height: calc(100% - 20px);
    background-color: #172a47;
  }

  /deep/.default-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }

  /deep/.el-tree-node__content {
    height: 34px;
    cursor: default;

    &:hover {
      background-color: #172a47;
      border: 1px solid #d0cdcd;
      color: white;
    }
  }

  /deep/.el-tree-node.is-current > .el-tree-node__content {
    background-color: #6bb5e6;
    color: #000;
  }

  .el-container {
    height: 100%;

    .aside-left {
      width: 200px !important;
      height: 100%;

      .el-tree {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-main {
      height: 100%;
      padding-top: 0px;

      .el-table {
        background-color: #1a4969;
        height: 425px;

        td {
          border-bottom: 1px solid #2e67a8;
        }

        tr:hover > td {
          background-color: #2f6b8d;
        }

        .table-herder-custom {
          background-color: #2e67a8;
          color: #fff;
        }

        .table-cell-custom {
          background-color: #172a47;
          color: #fff;

          .el-link {
            color: #fff;
            margin-left: 20px;

            span {
              font-size: 10px;
            }

            &:hover {
              color: #06f7bb;
            }
          }
        }

        /deep/.el-table__body tr.current-row > td {
          background: #00b2ee !important;
        }
      }

      .el-table::before {
        height: 0;
      }
    }
  }

  /deep/.aside-right {
    height: 425px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #00b2ee;
    border-radius: 5px;
    background-color: #172a47;
  }

  .right-scrollbar {
    width: 100%;
    height: calc(100% - 40px);
  }

  /deep/.right-scrollbar__wrap {
    width: auto;
    // height: 110%;
    overflow-x: hidden;
  }

  .input-text {
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;

    .el-input {
      margin-left: 3px;

      .el-input__inner {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-button {
      height: 28px;
      padding: 0 10px;
      margin: 0 2px;
    }
  }

  .distribution-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 3px 2px;
    color: #fff;
    display: flex;

    div {
      width: 50%;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  }

  .distribution-item:hover {
    background-color: #a4cedb;
  }

  .distribution-commit {
    text-align: center;
    margin-top: 5px;

    .el-button {
      height: 30px;
      width: 80px;
      background-color: #172a47;
      color: #fff;
      padding: 0;
    }

    .el-button:hover {
      background-color: #409eff;
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0px;
      opacity: 0.96;
      .el-dialog__footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
      .back-to-list {
        color: #fff;
        height: 22px;
        width: 22px;
        margin-left: 15px;
        cursor: pointer;
      }
      .el-form {
        .el-form-item__label {
          color: #fff;
        }
        .el-form-item__content {
          width: 70%;
        }
        .el-input__inner,
        .el-textarea__inner {
          background-color: #1a4969;
          color: #fff;
          // width: 40%;
        }
        .group-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .svg-icon {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            cursor: pointer;
          }
          .add-label {
            color: #fff;
            cursor: pointer;
          }
          .el-input__inner {
            width: 240px;
          }
          &.add {
            margin-left: -1px;
            font-size: 13px;
            label {
              margin-left: 3px;
            }
            .valid-rule {
              color: #f56c6c;
              margin-left: 20px;
              font-size: 12px;
            }
          }
          .set-defaultNo {
            margin-left: 10px;
            font-style: oblique;
            .el-radio__label {
              font-size: 10px;
            }
          }
          .img-threeDian {
            width: 34px;
            border: 1px solid gray;
            background-color: whitesmoke;
          }
          .img-threeDian:hover {
            border: 1px solid rgb(60, 60, 151);
            background-color: rgb(122, 213, 243);
          }
        }
      }
      .el-upload {
        .el-button {
          color: #fff;
          background-color: #1a4969;
          margin-top: 10px;
          &:hover {
            background-color: #00b2ee;
          }
        }
      }
    }

    .trial-box {
      position: absolute;
      left: calc(50% - 100px);
      top: calc(50% - 50px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      width: 200px;
      height: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
      }
      .trial-loading {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
      .el-button {
        width: 70px;
        color: #fff;
        background-color: #1a4969;
        margin-top: 10px;
        &:hover {
          background-color: #00b2ee;
        }
      }
      .form-item-group {
        margin: 5px 0;
        .svg-button {
          height: 32px;
          display: flex;
          align-items: center;
          margin-bottom: 18px;
        }
      }
    }
  }
  .default-select-tree {
    right: 30px;
    position: absolute;
    bottom: 15%;
    height: 400px;
    width: 220px;
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: 7px;
    z-index: 999999;
    .tree-scrollbar {
      border-radius: 7px;
      width: 100%;
      height: calc(100% - 40px);
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        /deep/.el-tree-node__content {
          height: 34px;
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        /deep/.el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee !important;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    /deep/.tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -20px !important;
    }
    text-align: center;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    width: 800px;
    height: 450px;

    .el-dialog__body {
      height: 400px;
    }

    .aside-left {
      width: 150px !important;
    }

    .el-main {
      padding-right: 5px;
      padding-left: 5px;
    }

    .el-table {
      height: 380px !important;
    }

    .el-tree-node__label {
      font-size: 12px;
    }

    .aside-right {
      height: 380px;
    }

    .distribution-item {
      font-size: 12px;
    }
  }
}
</style>